<template>
	<view>
		<map style="width: 100%; height: 100vh;" :latitude="latitude" scale='10' :longitude="longitude" :markers="markers" @markertap='handleMarkerTap'></map>
	</view>
</template>

<script>
	/*
	* 推荐在app端使用高德地图
	* 该演示app在manifest页面使用的高德key所有权归Yuki所有
	* 想使用时请前往高德地图  https://lbs.amap.com/ 进行申请后，进行替换操作
	* 
	* 注:地图平台的经纬度坐标是经过加密的,如需要进行跨地图平台开发,请进行坐标转换
	*/
	export default {
		data() {
			return {
				latitude: 32.909, 			// 中心点纬度
				longitude: 119.39742,		// 中心点经度
				markers: [{
					id:1,
					latitude: 32.909,
					longitude: 119.37742,
					iconPath:require('../../../../static/logo.png'),
					label:{
						content:'第一个点'
					},
					callout:{
						content:`姓名：张三
年龄：24`
					}
				}, {
					id:2,
					latitude: 32.929,
					longitude: 119.43742,
					iconPath: require('../../../../static/logo.png'),
					label:{
						content:'第二个点',
					},
					callout:{content:`姓名：李四
年龄：22`}
				}]
			}
		},
		onLoad() {
			// 监听从nvue传过来的值 uni.$on 要放在onLoad生命周期中
			uni.$on('deliverData',(e)=>{
				uni.showToast({
					icon:'none',
					title:e,
					duration:5000
				})
			})
		},
		onReady() {
			this.initSubNvues()
		},
		methods: {
			handleMarkerTap(e){
				console.log(e)
			},
			initSubNvues(){
				const subNvue = uni.getSubNVueById('drawer')
				subNvue.setStyle({
					top: '88px'
				})
				subNvue.show('none', 220);
			}
		}
	}
</script>

<style>

</style>
